<template>
  <div>
    <el-row>
      <el-col>
        <el-table :data="orderGoods">
          <el-table-column label="详情" width="330">
            <template slot-scope="scope">
              <div style="float: left">
                <el-image
                  style="width: 60px; height: 60px"
                  :src="scope.row.goodsUrl"
                  fit="cover"></el-image>
              </div>
              <div style="float: left; padding-left: 10px; overflow: hidden">
                <a>{{scope.row.goodsSn}}</a><br/>
                <a>{{scope.row.goodsName}}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column property="goodsAttr" label="尺寸" width="170"></el-table-column>
          <el-table-column label="数量" width="100">
            <template slot-scope="scope">x{{scope.row.goodsNumber}}</template>
          </el-table-column>
          <el-table-column label="单价" width="100">
            <template slot-scope="scope">¥{{scope.row.goodsPrice}}</template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-form :model="orderAllInfo" class="licc-order-deliver-info-form" label-width="110px">
          <el-form-item label="总额：">{{orderAllInfo.goodsAmount}}</el-form-item>
          <el-form-item label="购买人手机号：">{{orderAllInfo.shopUser.phone}}</el-form-item>
          <el-form-item label="收货人姓名：">{{orderAllInfo.consignee}}</el-form-item>
          <el-form-item label="收货人手机号：">{{orderAllInfo.phone}}</el-form-item>
          <el-form-item label="收货地址：">
            {{orderAllInfo.province}}{{orderAllInfo.city}}{{orderAllInfo.district}}{{orderAllInfo.street}}-{{orderAllInfo.address}}
          </el-form-item>
          <el-form-item label="订单留言：">
            {{orderAllInfo.postscript}}
          </el-form-item>
          <el-form-item v-if="applayReturnOrderShow" label="退货理由：">{{orderReturnInfo.returnNote}}</el-form-item>
          <el-form-item v-if="returnOrderShow" label="退货处理结果：">{{orderReturnInfo.processInformation}}</el-form-item>
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in orderActivities"
              :key="index"
              :color="activity.color"
              :timestamp="activity.timestamp">
              {{activity.content}}
            </el-timeline-item>
          </el-timeline>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import orderInfoApi from '@/api/backstage/components'
  export default {
    name: 'GoodsInfo',
    props: ['message'],
    data() {
      return {
        orderGoods:[],
        orderAllInfo:{},
        orderReturnInfo:{},
        orderActivities:[],
        applayReturnOrderShow: false,
        returnOrderShow: false
      }
    },
    created(){
      this.initPage();
    },
    methods: {
      initPage() {
        this.orderAllInfo = this.message;
        this.orderGoods = this.message.orderGoods;
        this.timeShowRule(this.orderAllInfo);
      },
      timeShowRule(orderInfo) {
        if (orderInfo.orderStatus == 10) {
          this.orderActivities.push({content: '下单时间', color: '#909399', timestamp: orderInfo.addTime});
          this.orderActivities.push({content: '支付时间', color: '#409EFF', timestamp: orderInfo.payTime});
          this.orderActivities.push({content: '发货时间', color: '#909399', timestamp: orderInfo.shippingTime});
          this.orderActivities.push({content: '收货时间', color: '#67C23A', timestamp: orderInfo.deliveryTime});
        }
        if (orderInfo.orderStatus == 20) {
          this.orderActivities.push({content: '下单时间', color: '#909399', timestamp: orderInfo.addTime});
        }
        if (orderInfo.orderStatus == 30) {
          this.orderActivities.push({content: '下单时间', color: '#909399', timestamp: orderInfo.addTime});
          this.orderActivities.push({content: '支付时间', color: '#409EFF', timestamp: orderInfo.payTime});
        }
        if (orderInfo.orderStatus == 40) {
          this.orderActivities.push({content: '下单时间', color: '#909399', timestamp: orderInfo.addTime});
          this.orderActivities.push({content: '支付时间', color: '#409EFF', timestamp: orderInfo.payTime});
          this.orderActivities.push({content: '发货时间', color: '#909399', timestamp: orderInfo.shippingTime});
        }
        if (orderInfo.orderStatus == 50) {
          this.orderActivities.push({content: '下单时间', color: '#909399', timestamp: orderInfo.addTime});
          this.orderActivities.push({content: '支付时间', color: '#409EFF', timestamp: orderInfo.payTime});
          this.orderActivities.push({content: '发货时间', color: '#909399', timestamp: orderInfo.shippingTime});
          this.orderActivities.push({content: '收货时间', color: '#67C23A', timestamp: orderInfo.deliveryTime});
        }
        if (orderInfo.orderStatus == 60) {
        }
        if (orderInfo.orderStatus == 70) {
          this.getOrderInfo(orderInfo.id);
          this.applayReturnOrderShow = true;
          this.orderActivities.push({content: '下单时间', color: '#909399', timestamp: orderInfo.addTime});
          this.orderActivities.push({content: '支付时间', color: '#409EFF', timestamp: orderInfo.payTime});
          this.orderActivities.push({content: '发货时间', color: '#909399', timestamp: orderInfo.shippingTime});
          this.orderActivities.push({content: '收货时间', color: '#67C23A', timestamp: orderInfo.deliveryTime});
          this.orderActivities.push({content: '退货申请时间', color: '#E6A23C', timestamp: orderInfo.applayReturnTime});
        }
        if (orderInfo.orderStatus == 80) {
          this.getOrderInfo(orderInfo.id);
          this.applayReturnOrderShow = true;
          this.returnOrderShow = true;
          this.orderActivities.push({content: '下单时间', color: '#909399', timestamp: orderInfo.addTime});
          this.orderActivities.push({content: '支付时间', color: '#409EFF', timestamp: orderInfo.payTime});
          this.orderActivities.push({content: '发货时间', color: '#909399', timestamp: orderInfo.shippingTime});
          this.orderActivities.push({content: '收货时间', color: '#67C23A', timestamp: orderInfo.deliveryTime});
          this.orderActivities.push({content: '退货申请时间', color: '#E6A23C', timestamp: orderInfo.applayReturnTime});
        }
        if (orderInfo.orderStatus == 90) {
          this.getOrderInfo(orderInfo.id);
          this.returnOrderShow = true;
          this.applayReturnOrderShow = true;
          this.orderActivities.push({content: '下单时间', color: '#909399', timestamp: orderInfo.addTime});
          this.orderActivities.push({content: '支付时间', color: '#409EFF', timestamp: orderInfo.payTime});
          this.orderActivities.push({content: '发货时间', color: '#909399', timestamp: orderInfo.shippingTime});
          this.orderActivities.push({content: '收货时间', color: '#67C23A', timestamp: orderInfo.deliveryTime});
          this.orderActivities.push({content: '退货申请时间', color: '#E6A23C', timestamp: orderInfo.applayReturnTime});
          this.orderActivities.push({content: '退货处理时间', color: '#F56C6C', timestamp: orderInfo.returnTime});
        }
        if (orderInfo.orderStatus == 95) {
          this.getOrderInfo(orderInfo.id);
          this.returnOrderShow = true;
          this.applayReturnOrderShow = true;
          this.orderActivities.push({content: '下单时间', color: '#909399', timestamp: orderInfo.addTime});
          this.orderActivities.push({content: '支付时间', color: '#409EFF', timestamp: orderInfo.payTime});
          this.orderActivities.push({content: '发货时间', color: '#909399', timestamp: orderInfo.shippingTime});
          this.orderActivities.push({content: '收货时间', color: '#67C23A', timestamp: orderInfo.deliveryTime});
          this.orderActivities.push({content: '退货申请时间', color: '#E6A23C', timestamp: orderInfo.applayReturnTime});
          this.orderActivities.push({content: '退货处理时间', color: '#F56C6C', timestamp: orderInfo.returnTime});
        }
      },
      getOrderInfo(orderId) {
        orderInfoApi.getOrderReturnInfoByOrderId({orderId: orderId}).then(res => {
          this.orderReturnInfo = res.data;
        }).catch(() => {

        })
      }
    }
  }
</script>
<style>
</style>
